<template>
  <view class="feedback-page">
    <!-- 顶部说明文字 -->
    <view class="description-section">
      <text class="description-text">
        使用过程中遇到任何问题或建议，都可以在这里告诉我们我们会尽快查看并联系您，感谢您的支持和反馈!
      </text>
    </view>

    <!-- 联系方式 -->
    <view class="form-section">
      <text class="section-title">联系方式</text>
      <input
        class="input-field"
        type="text"
        v-model="formData.contact"
        placeholder="请输入手机号、微信号或邮箱，方便我们联系您"
        placeholder-class="input-placeholder"
      />
    </view>

    <!-- 问题描述 -->
    <view class="form-section">
      <text class="section-title">问题描述</text>
      <textarea
        class="textarea-field"
        v-model="formData.description"
        placeholder="请详细描述您遇到的问题或建议，我们将尽快与您取得联系！"
        placeholder-class="textarea-placeholder"
        auto-height
        :maxlength="500"
      />
    </view>

    <!-- 提交按钮 -->
    <button class="submit-button" @tap="submitFeedback">点击提交</button>
	
	<!-- Loading 弹窗 -->
	<uni-popup ref="loadingPopup" type="center" :mask-click="false" mask-background-color="rgba(0,0,0,0)">
	  <view class="loading-box">
		<image class="success" src="/static/icons/success.png"></image>
		<text class="text-overlay" >提交成功!</text>
	  </view> 
	</uni-popup>
	
	
  </view>
</template>

<script setup lang="ts">
import { reactive ,ref} from 'vue';
import { saveFeedback } from '../../api/userApi'; // 引入封装的请求
const loadingPopup = ref<any>(null);
const loadingMessage = ref('');


// 延迟函数
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
interface FormData {
  contact: string;
  description: string;
}

const formData = reactive<FormData>({
  contact: '',
  description: '',
});

// 提交反馈
const submitFeedback = async () => {
  if (!formData.contact.trim()) {
    uni.showToast({
      title: '请输入联系方式',
      icon: 'none',
    });
    return;
  }
  if (!formData.description.trim()) {
    uni.showToast({
      title: '请输入问题描述',
      icon: 'none',
    });
    return;
  }

  console.log('提交反馈数据:', formData);

  try {
    // 调用封装的 saveFeedback 方法
    await saveFeedback({
      contact: formData.contact,
      description: formData.description,
    });

    uni.hideLoading();
    // uni.showToast({
    //   title: '反馈已提交',
    //   icon: 'success',
    //   duration: 2000,
    // });
	  loadingMessage.value = '提交成功';
	  loadingPopup.value?.open();
	  //await delay(300);
	  //loadingPopup.value?.close();
    setTimeout(() => {
      // 提交成功后清空表单并返回上一页
      formData.contact = '';
      formData.description = '';
      uni.navigateBack();
    }, 500);
  } catch (err) {
    uni.hideLoading();
    uni.showToast({
      title: '提交失败，请稍后重试',
      icon: 'none',
      duration: 2000,
    });
    console.error('提交反馈失败:', err);
  }
};
</script>

<style lang="scss" scoped>

.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F8F8F8;
	}
.feedback-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; // 确保页面至少撑满一屏
  padding: 30rpx;
  background-color: #F8F8F8; // 页面背景色
  box-sizing: border-box;
}

.description-section {
  margin-bottom: 72rpx; // 增加了与下方联系方式的间距
  .description-text {
    font-size: 30rpx;
    color: #000000;
    line-height: 43rpx; // 调整行高使其更易读
  }
}

.form-section {
  margin-bottom: 32rpx;
  .section-title {
    display: block;
    font-size: 30rpx;
    color: #000000;
	line-height: 43rpx;
    margin-bottom: 20rpx;
  }

  .input-field,
  .textarea-field {
    width: 100%;
    background-color: #F4F4F4; // 浅灰色背景，符合截图
    border-radius: 12rpx; // 轻微圆角
    padding: 24rpx 20rpx; // 调整内边距
    font-size: 28rpx;
    color: #333333;
    box-sizing: border-box;
    border: none; // 无边框
  }

  .input-field {
    height: 90rpx; // 固定输入框高度
  }

  .textarea-field {
    min-height: 240rpx; // 文本域最小高度
    line-height: 1.5; // 文本域行高
  }

  // Placeholder 样式
  // 对于微信小程序等平台，可以直接使用 placeholder-style 属性或 placeholder-class
  .input-placeholder,
  .textarea-placeholder {
    color: #999999;
    font-size: 28rpx;
  }
  // 如果 placeholder-class 在某些平台不完全生效，可以考虑使用下面的方式，但兼容性各异
  // ::v-deep .uni-input-placeholder,
  // ::v-deep .uni-textarea-placeholder {
  // color: #999999;
  // font-size: 28rpx;
  // }
}

.submit-button {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #007AFF;
  color: #FFFFFF;
  font-size: 32rpx;
  border-radius: 48rpx;
  border: none;
  margin-top: 60rpx;
  // margin-bottom: 30rpx; // 如果页面内容较少，按钮下方也加点间距

  // 按钮按下效果
  &:active {
    background-color: #005EC4; // 按下时颜色变深一点
  }
}

/* Loading弹窗样式 (保持不变) */
.loading-box {
  width: 548.51rpx;
  height: 303rpx;
  background-image: url(/static/loading_background.png);
  background-size: 100% 100%;
  background-position: center;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.text-overlay {
		width: 380rpx;
		height: 89rpx;
		line-height: 43rpx;
		font-family: Source Han Sans,Source Han Sans;
		font-weight: 700;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		position: absolute;
		top: 210rpx;
		left: 100rpx;
	  
	}
.success{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top:86rpx;
		left: 241rpx;
}
.loading-text {
  margin-top: 10rpx;
  color: #fff;
  font-size: 38rpx;
}
</style>
